<template>
  <div class="self-container">
    <!--    顶部区域-->
    <div class="self-header">
      <p>我的</p>
    </div>

    <!-- 头像等-->
    <div class="profile">
      <div class="img">
        <!--      上传头像-->
        <van-uploader
            result-type="file"
            :action="url"
            :data="{ phone: phone}"
            :before-upload="beforeUpload"
            :after-read="afterRead"
            accept="image/*"
        >
          <!--      头像-->
          <img
              class="avatar"
              :src="currentContact.avatarUrl"
          />
        </van-uploader>
      </div>
      <!--个人信息-->
      <div class="user">
        <div class="top">
          <span>{{ currentContact.name }}</span>
          <span>{{ currentContact.tel }}</span>
        </div>
        <div class="top">
          <i>今日名言</i>
          <span class="bottom">{{ currentContact.todaySaying }}</span>
        </div>
      </div>
    </div>
    <!-- 用户基本信息面板 -->
    <!--        信息卡片1-->
    <div class="wrapper">
      <div class="msgCard1">
        <div>
          <div style="background-color: #fff4ec">
            <van-icon name="manager" color="#fe7002" size="1.3rem"/>
          </div>
          <span>我的信息</span>
          <van-icon name="arrow" color="#5d5d5d" class="right_boult"/>
        </div>
        <div>
          <div style="background-color: #fff1f4">
            <van-icon name="balance-list" color="#f54044" size="1.3rem"/>
          </div>
          <span>我的账户</span>
          <van-icon name="arrow" color="#5d5d5d" class="right_boult"/>
        </div>
      </div>
    </div>
    <div>
      <!--        信息卡片2-->
      <div class="wrapper">
        <div class="msgCard1">
          <div>
            <div style="background-color: #fffded">
              <van-icon name="manager" color="#ffa101" size="1.3rem"/>
            </div>
            <span>我的解决方案</span>
            <van-icon name="arrow" color="#5d5d5d" class="right_boult"/>
          </div>
          <div>
            <div style="background-color: #f8f4ff">
              <van-icon name="comment-circle" color="#785bf7" size="1.3rem"/>
            </div>
            <span>我的对接</span>
            <van-icon name="arrow" color="#5d5d5d" class="right_boult"/>
          </div>
        </div>
      </div>
      <!--        信息卡片3-->
      <div class="wrapper">
        <div class="msgCard1">
          <div>
            <div style="background-color: #fff7ee">
              <van-icon name="comment" color="#ffa101" size="1.3rem"/>
            </div>
            <span>意见反馈</span>
            <van-icon name="arrow" color="#5d5d5d" class="right_boult"/>
          </div>
          <div>
            <div style="background-color: #f1f3ff">
              <van-icon name="setting" color="#5a81dc" size="1.3rem"/>
            </div>
            <span>设置</span>
            <van-icon name="arrow" color="#5d5d5d" class="right_boult"/>
          </div>
        </div>
      </div>
      <!-- 操作面板 -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'SelfPage',
  inject: ['$baseUrl', '$apiUrl', '$headImgUrl'],
  data() {
    return {
      currentContact: {
        name: '',
        tel: '',
        todaySaying: '',
        avatarUrl: '',
      },
      avatarUrl: ' ', // 初始头像 URL
      phone: '', // 当前用户ID
      url: this.$apiUrl + '/user/upload',
      uploader: [],       // 物品照片
    }
  },
  created() {

    this.$nextTick(() => {
      let user_id = localStorage.getItem("user_id");
      this.getUserPhoneByUUID(user_id)
    })

  },
  methods: {
    openFileInput() {
      this.$refs.fileInput.click();
    },
    handleFileInputChange(event) {
      const files = event.target.files;
      // 处理选择的文件
      // ...
    },
    // 上传头像之前的处理
    beforeUpload(file) {
      va.openAlbum(3).then(function (files) {
        // alert(files[0].getName());
        console.log('上传头像之前的处理')
      }).catch(console.error);
      // 限制上传文件的大小和类型
      // console.log("限制上传文件的大小和类型")
      const isLt10M = file.size / 1024 / 1024 < 10;
      const isImage = /^image\//.test(file.type);
      if (!isLt10M) {
        this.$toast('上传头像图片大小不能超过 10MB');
        return false;
      }
      if (!isImage) {
        this.$toast('请上传头像图片');
        return false;
      }
      // console.log("允许发送请求")
      return true;
    },
    // 上传头像
    async afterRead(file) {
      const formData = new FormData();
      formData.append('file', file.file);
      formData.append('phone', this.phone);

      try {
        // const url = this.$apiUrl + '/upload';
        // console.log("发送请求")
        const response = await this.$http.post(this.url, formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          },
        });

        if (response.status === 200) {
          // console.log("请求成功")
          // console.log(response.data.data.url)
          const avatarUrl = response.data.avatarUrl;
          this.avatarUrl = avatarUrl;
          this.$toast('上传成功，请稍后...');
        } else {
          // console.log("请求失败")
          this.$toast(response.data.message || '上传头像失败');
        }
      } catch (error) {
        // console.error(error);
        this.$toast('上传头像失败，请稍后再试');
      }
    },
    // 根据手机号获取用户信息
    /* getUserByPhone() {
       const registerDTO = {
         phone: this.phone
       }
       console.log(registerDTO.phone,"*****************phone****************")
       const url = this.$apiUrl + 'user/getUserByPhone';
       this.$http.post(url, registerDTO).then(res => {
         console.log(res,  "=======================================")
         this.currentContact.tel = res.data.data.mobile;
         this.currentContact.name = res.data.data.username;
         this.currentContact.todaySaying = res.data.data.todaySaying === '' ? '今日暂无名言' : res.data.data.todaySaying;
         this.currentContact.avatarUrl = res.data.data.images === '' ? 'http://1.117.94.134:8086/Login.gif' : res.data.data.images;
       })
     },*/
    // 根据uuid/Token获取用户信息
    getUserPhoneByUUID(user_id) {
      const registerDTO = {
        userId: user_id
      }
      const url = this.$apiUrl + '/user/getUsersByUserId';
      this.$http.post(url, registerDTO).then(res => {
        console.log(res)
        // console.log(res,  "根据uuid/Token获取用户信息")
        this.currentContact.tel = res.data.data.mobile;
        this.phone = res.data.data.mobile;
        this.currentContact.name = res.data.data.username;
        this.currentContact.todaySaying = res.data.data.today_saying === '' ? '今日暂无名言' : res.data.data.today_saying;
        this.currentContact.avatarUrl = res.data.data.images === '' ? this.$headImgUrl + 'login.gif' : this.$headImgUrl + res.data.data.images;
      })
    }
  },
  mounted() {
    // this.$refs.myDropzone.hiddenFileInput.setAttribute('capture', 'user');
    setInterval(() => {
      const now = new Date()
      const hour = now.getHours()
      const minute = now.getMinutes()
      if (hour === 0 && minute === 0) {
        setTimeout(() => {
          // 在这里执行定时任务代码
          const registerDTO = {
            phone: this.phone
          }
          const url = this.$apiUrl + '/quote/updateQuote';
          this.$http.post(url, registerDTO).then(res => {
            this.currentContact.todaySaying = res.data.data.todaySaying
          })
        }, 10000)
      }
    }, 20000)
  }
}
</script>

<style lang="less" scoped>
.self-container {
  width: 100%;
  height: calc(100vh - 5rem - 50px);
  background-color: #f6f6f6;
  padding-top: 5rem;

  // wrapper
  .wrapper {
    width: calc(100% - 1rem);
    margin: 1rem 0.5rem;
  }

  //  顶部区域
  .self-header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 5rem;
    text-align: center;
    color: white;
    z-index: 999;
    //background-color: #fe910e;
    background-color: #fe910e;
    animation: bg-animation 5s ease-in-out infinite;
    @keyframes bg-animation {
      0% {
        background-color: #fd9b12;
      }
      50% {
        background-color: #fe7209;
      }
      100% {
        background-color: #fd9b12;
      }
    }
    box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.4);

    p {
      margin-top: 1.3rem;
      font-size: 16px;
    }
  }

  // 头像等
  .profile {

    .img {
      position: fixed;
      width: 100%;
      padding: 0 1rem 1rem 2rem;
      top: 2.8rem;
      z-index: 1000;
    }

    .avatar {
      width: 4rem;
      height: 4rem;
      border-radius: 50%;
      object-fit: cover;
    }

    .user {
      margin-top: 2.2rem;
      padding: 0 1.5rem 0 1.5rem;
      font-size: 14px;
      color: #666666;

      .top {
        display: flex;
        justify-content: left;
        align-items: center;
        margin-bottom: 0.5rem;

        span:nth-child(1) {
          margin-right: 1.2rem;
          font-size: 15px;
          color: black;
        }

        i {
          font-style: normal;
          color: black;
          margin-right: 1.2rem;
          letter-spacing: 0.2rem;
        }
      }

      .bottom {
        margin-bottom: 0.1rem;
        margin-right: -1.5rem;
      }
    }
  }

  // 信息卡片
  .wrapper .msgCard1 {
    height: 7rem;
    background-color: #ffffff;
    box-shadow: 0 0.1rem 0.5rem 0 rgba(79, 79, 79, 0.22);
    border-radius: 0.6rem;

    div {
      width: calc(100% - 1rem);
      height: 3.5rem;
      padding: 0 0.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        flex: 9;
        margin-bottom: 0.15rem;
      }

      .right_boult {
        flex: 0.8;
      }
    }

    div:nth-child(1) {
      border-bottom: solid #f0efef 0.05rem;
    }

    div {
      margin-right: 1.3rem;

      div {
        padding: 0;
        width: 2.3rem;
        height: 2.3rem;
        //background-color: #fff4ec;
        border-radius: 50%;
        display: flex;
        justify-content: center;

      }
    }
  }
}
</style>
